<template>
  <a-table
    v-if="dataSource.length > 0"
    :dataSource="dataSource"
    :columns="columnsFilter"
    :pagination="query"
    @change="onChange"
    :loading="loading"
    :size="lineheight"
    :row-key="record => record.roleId"
  >
    <template #bodyCell="{ column = {}, text, record }">
      <template v-if="column.key === 'operation'">
        <edit-button :data="record" />
        <check-button :data="record" />
        <invalid-button :data="record" />
      </template>
      <template v-if="column.key === 'roleDesc'">
        <a-tooltip>
          <template #title>{{ text }} </template>
          <div
            style="
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            {{ text }}
          </div>
        </a-tooltip>
      </template>
      <template v-if="column.key === 'dataScope'">
        <a-tooltip>
          <template #title>{{ text }} </template>
          <div
            style="
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            {{ text }}
          </div>
        </a-tooltip>
      </template>
      <template v-if="column.key === 'allowedActions'">
        <a-tooltip>
          <template #title>{{ text }} </template>
          <div
            style="
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            {{ text }}
          </div>
        </a-tooltip>
      </template>
    </template>
  </a-table>
  <div
    v-else
    style="
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    "
  >
    <a-spin :spinning="loading">
      <a-empty
        :image="notData"
        :description="loading ? '加载中...' : '暂无数据'"
      />
    </a-spin>
  </div>
</template>
<script setup>
import { onMounted, computed, watch } from 'vue'
import ATable from '@/components/table.vue'
import EditButton from './table-content-edit.vue'
import CheckButton from './table-content-view.vue'
import InvalidButton from './table-content-invalid.vue'
import notData from '@/assets/images/not-data.png'
import {
  useColumns,
  useQuery,
  useDataSourceManager,
  useDataSource,
  useLineheight,
  useLoading,
} from './provide-context.js'

/**
 * 全局数据
 */
let columns = useColumns()
let dataSource = useDataSource()
let query = useQuery()
let loading = useLoading()
let lineheight = useLineheight()
let { update } = useDataSourceManager()
/**
 * 表头
 */
let columnsFilter = computed(() => {
  return columns?.value?.filter(({ checked }) => checked) || []
})
/**
 * table组件分页、排序、筛选变化事件
 */
function onChange({ current, pageSize }) {
  query.value.current = current
  query.value.pageSize = pageSize

  update()
}
//初始化调用
//初始化调用
onMounted(() => {
  query.value.current = 1
  query.value.pageSize = 10
  update()
})
</script>
